<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>房盟网</title>
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/login.css">
</head>
<body>
<div class="common-wrapper" style="width: 420px;margin: auto">
  <div class="box-t">
    <ul class="clearfix">
      <li class="login-btn f on">登录</li>
      <li class="reset-btn f">申请</li>
    </ul>
  </div>
  <!--登录-->
  <form class="login-form" style="">
    <div class="login input-box-common">
      <div class="input-box clearfix">
        <label class="tc-icon f"><img src="../images/tc-phone.png" alt=""></label>
        <input class="f input-item" type="text" placeholder="请输入手机号">
      </div>
      <div class="input-box clearfix">
        <label class="tc-icon f"><img src="../images/tc-mima.png" alt=""></label>
        <input class="f input-item" type="text" placeholder="请输入密码" >
      </div>
      <div class="check-box clearfix">
        <div class="mima f clearfix">
          <input type="checkbox" style="margin:2px 3px 0 0;"  name="save-mima" class="f" id="save-mima">
          <label class="save-text " for="save-mima">记住密码</label>
        </div>
        <span class="r reset-mima-btn">忘记密码？</span>
      </div>
      <div class="btn-box login-btn-box"><button>立即登录</button></div>
    </div>
  </form>

  <!--申请-->
  <form class="reset-form" style="display: none">
    <div class="login input-box-common">
      <div class="input-box clearfix">
        <label class="tc-icon f"><img src="../images/tc-user.png" alt=""></label>
        <input class="f input-item" type="text" placeholder="请输入姓名">
      </div>
      <div class="input-box clearfix">
        <label class="tc-icon f"><img src="../images/tc-phone.png" alt=""></label>
        <input class="f input-item" type="text" placeholder="请输入手机号">
      </div>
      <div class="input-box clearfix" style="background: url('../images/tc-qy.png');background-size: 100% 100%">
        <label class="tc-icon f"><img src="../images/tc-location.png" alt=""></label>
        <div class="province-list f">
          <div class="content">
            <div class="select select1">
              <p data-value="所以选项">省份</p>
              <ul>
                <li data-value="所以选项" class="Selected">所以选项</li>
                <li data-value="Html">Html</li>
                <li data-value="Html5">Html5</li>
                <li data-value="JavaScript">JavaScript</li>
                <li data-value="Jquery">Jquery</li>
                <li data-value="Java">Java</li>
                <li data-value="c#">c#</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="cities-list f">
          <div class="content">
            <div class="select select2">
              <p data-value="所以选项">城市</p>
              <ul>
                <li data-value="所以选项" class="Selected">所以选项</li>
                <li data-value="Html">Html</li>
                <li data-value="Html5">Html5</li>
                <li data-value="JavaScript">JavaScript</li>
                <li data-value="Jquery">Jquery</li>
                <li data-value="Java">Java</li>
                <li data-value="c#">c#</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="input-box clearfix">
        <label class="tc-icon f"><img src="../images/tc-gongsi.png" alt=""></label>
        <input class="f input-item" type="text" placeholder="公司(可不填)">
      </div>
      <div class="input-box clearfix">
        <label class="tc-icon f"><img src="../images/tc-tjr.png" alt=""></label>
        <input class="f input-item" type="text" placeholder="推荐人(可不填)">
      </div>
      <div class="btn-box login-btn-box"><button>提交</button></div>
    </div>
  </form>

  <!--找回密码-->
  <form class="reset-mima-form" style="display: none">
    <h3 class="mima-t" style="">忘记密码</h3>
    <div class="login input-box-common">
      <div class="input-box clearfix">
        <label class="tc-icon f"><img src="../images/tc-phone.png" alt=""></label>
        <input class="f input-item" type="text" placeholder="请输入手机号">
      </div>
      <div class="input-box clearfix">
        <label class="tc-icon f"><img src="../images/tc-code.png" alt=""></label>
        <input class="f input-item" type="text" placeholder="请输入验证码" style="width: 180px">
        <span class="f send-code">发送验证码</span>
      </div>
      <div class="input-box clearfix">
        <label class="tc-icon f"><img src="../images/tc-mima.png" alt=""></label>
        <input class="f input-item" type="text" placeholder="设置新密码">
      </div>
      <div class="input-box clearfix">
        <label class="tc-icon f"><img src="../images/tc-mima-r.png" alt=""></label>
        <input class="f input-item" type="text" placeholder="确认密码">
      </div>
      <div class="btn-box login-btn-box"><button>确认</button></div>
    </div>
  </form>
</div>

<script src="../js/jquery.min.js"></script>
<script>
  $(function(){
//      省份
    $(".select1").click(function(e){
      $(this).toggleClass("open");
      $('.select2').removeClass("open");
      e.stopPropagation();
    });
//      城市
    $(".select2").click(function(e){
      $(this).toggleClass("open");
      $('.select1').removeClass("open");
      e.stopPropagation();
    });
//下拉选择
    $(".content .select ul li").click(function(e){
      var _this=$(this);
      _this.parents('.select').find('p').text(_this.attr('data-value'));
      _this.addClass("Selected").siblings().removeClass("Selected");
      $(".select").removeClass("open");
      e.stopPropagation();
    });

    $(document).on('click',function(){
      $(".select").removeClass("open");
    })


//    切换注册、登录和密码
    $('.login-btn').click(function(){
      $(this).addClass('on').siblings().removeClass('on');
      $('.reset-form').hide();
      $('.login-form').show();
      console.log("dfa")
    });
    $('.reset-btn').click(function(){
      $(this).addClass('on').siblings().removeClass('on');
      $('.login-form').hide();
      $('.reset-form').show();
    });
    $('.reset-mima-btn').click(function(){
      $('.login-form,.box-t').hide();
      $('.reset-mima-form').show();
    });

  });
</script>
</body>
</html>